<style>

.pieChart{
    border-width:0;
    margin:10px 0;
    padding:0;
    height:200px;
    width:100%;
}
.pieDiv{
    float: left;
    width: 32%;
    height:200px;
    border: 1px solid #DFE4E8;

}

.pieDiv h1{
    text-align:left;
    line-height:26px;
    padding-left:5px;
}
.pieDiv.third{
    margin-left:1.6%;
}
.pieDiv.second{
    margin-left:1.6%;
}

.pieHead{
    height:30px;
    border-bottom: 1px solid #DFE4E8;
}

.pieBody{
    height:168px;
    width:98%;
}

#tabs{
    float:left;
    margin:10px 0;
    padding:0;
    width:100%;
    border-bottom:1px solid #DFE4E8;
}

.lineDiv{
    margin:0 auto;
    height:300px;
    overflow:hidden;
}

#panel .panelHeader{
    border-left:0px;
}

</style>
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<div style="float:left;width:100%;height: 210px;">
    <div class="pieChart" >
        <div class="pieDiv first" >
            <div class="pieHead"><h1><@label key="defectLevel.C">缺陷等级</@label></h1></div>    
            <div class="pieBody" id="defectLevelPie"></div>    
        </div>
        <div class="pieDiv second" >
            <div class="pieHead"><h1><@label key="defectType.C">缺陷类型</@label></h1></div>    
            <div class="pieBody" id="defectTypePie"></div>    
        </div>
        <div class="pieDiv third" >
            <div class="pieHead"><h1><@label key="responsibilityType.C">责任类型</@label></h1></div>    
            <div class="pieBody" id="responsibilityTypePie"></div>    
        </div>
    </div>
</div>
<div id="archives_controlInspect" style="float:left;width:100%;border: 1px #d8dfe5 solid;border-top: 0px;">
<#include "/common/pagerForm.html">
<form rel="pagerForm" method="post" action="${rc.getContextPath()}/manage/inspectRecord/controlInspectSearch" onsubmit="return  dwzSearch(this, 'dialog');">
<input type="hidden" name="controlNum" value="<#if condition??>${condition.controlNum!''}</#if>" />
<div class="panelBar">
    <ul class="toolBar">
        <li style="margin-top: 8px;"><h1 style="text-align:left;">过程检验信息</h1></li>
    </ul>
</div>
<table class="table" layoutH="380">
    <thead>
        <tr>
            <th width="30"><@label key="serialNumber.C">序号</@label></th>
            <th width="100" ><@label key="defectCode.C">缺陷编号</@label></th>
            <th width="100" ><@label key="defectText.C,name.C">缺陷描述</@label></th>
            <th width="100" ><@label key="defectLevelText.C">缺陷等级描述</@label></th>
            <th width="100" ><@label key="responsibilityTypeText.C">责任类型描述</@label></th>
            <th width="80"><@label key="defectType.C">缺陷类型：</@label></th>
            <th width="100"><@label key='inspectUser.C'>检验人员：</@label></th>
            <th width="100"><@label key='inspectDateTime.C'>检验时间：</@label></th>
            <th width="100" ><@label key="qmOperation.C,code.C">质检工序编号</@label></th>
            <th width="100" ><@label key="qmOperation.C,name.C">质检工序名称</@label></th>
            <th width="100"><@label key="workCenterCode.C">工作中心</@label></th>
            <th width="100"><@label key="workUnit.C">作业单元</@label></th>
            <th width="50" ><@label key="defectDefine.C,quantity.C">缺陷数量</@label></th>
        </tr>
    </thead>
    <tbody>
        <#if page?? && (page.data?size>0)>
            <#list page.data as inspect>
                <#assign defect = inspect.defect />
                <tr>
                    <td>${page.startRow + inspect_index}</td>
                    <td>${inspect.defectCode!''}</td>
                    <td>${inspect.defectText!''}</td>
                    <td>${defect.defectLevelText!''}</td>
                    <td>${defect.responsibilityTypeText!''}</td>
                    <td>${defect.defectTypeText!''}</td>
                    <td>${inspect.createUser!''}</td>
                    <td>${(inspect.createDateTime?string("yyyy-MM-dd HH:mm:ss"))?if_exists}</td>
                    <td>${inspect.operationCode!''}</td>
                    <td>${inspect.operationText!''}</td>
                    <td>${inspect.workcenterText!''}</td>
                    <td>${inspect.workunitText!''}</td>
                    <td>${inspect.quantity!''}</td>
                </tr>
            </#list>
        </#if>
    </tbody>
</table>
<div class="panelBar" style="border-width: 1px;">
        <#if page??>
        <div class="pages">
            <span ><@label key="pagePanelShow.C">显示</@label></span> <select class="combox" name="numPerPage"
                onchange="navTabPageBreak({numPerPage:this.value},'archives_controlInspect')"> <#list
                [10,20,30,50,100,200] as page_size> <#if
                (page.numPerPage)==page_size>
                <option value="${page_size}" selected="selected">${page_size}</option>
                <#else>
                <option value="${page_size}">${page_size}</option> </#if> </#list>
            </select> <span><@label key="pagePanelMiddle.C">共</@label></span><span><#if page.totalCount??>${page.totalCount?c}<@label key="item.C">条</@label></span></#if>
        </div>
    
        <div class="pagination" targetType="navTab" rel="archives_controlInspect"
            totalCount="<#if page.totalCount??>${page.totalCount?c}</#if>"
            numPerPage="<#if page.numPerPage??>${page.numPerPage?c}</#if>"
            pageNumShown="5"
            currentPage="<#if page.pageNum??>${page.pageNum?c}</#if>"></div>
        </#if>
</div>
</form>
</div>

<script type="text/javascript">
var controlArchivesInspect = {
		color1 : [ '#d97a80', '#2ec8ca', '#b6a2df', '#5bb0f0', '#ffb880',
		                '#7ad8bf', '#7a9dd8', '#1380ce', '#d89b7a', '#dea2ad' ],
		color2 : [ '#00acc6', '#4f93b6', '#85a959', '#fba565', '#00aee3',
		        '#0084c6', '#fe8463', '#9bca63', '#fad860', '#60c0dd', ],
		color3 : [ '#f6a248', '#1dcad1', '#1ea1e4', '#54ad45', '#dd7082',
		        '#68c359', '#3a8db7', '#e29039', '#50ced3', '#f49cab', ],

		defectLevelPie : null,

		defectTypePie : null,

		responsibilityTypePie : null,
		
		showInspectPieByType : function(type,color,chart, params){
			 $.DWZajax({
			        url:"${rc.getContextPath()}/manage/qualityReport/controlArchivesInspectForPie?groupType="+type,
			        data:params,
			        callback:function (data){
			            list=data;
			            var seriesData=new Array();
			            var legendData=new Array();
			            $.each(list,function(i,n){
			                seriesData.push({"name":list[i].text,"value":list[i].count});
			            });
			            $.each(list,function(i,n){
			                legendData.push(list[i].text);
			            });
			            controlArchivesInspect.pieOption.series[0].data=seriesData;
			            controlArchivesInspect.pieOption.color = color;
			            controlArchivesInspect.pieOption.legend.data=legendData;
			            chart.setOption(controlArchivesInspect.pieOption, true);
			        }
			  });
		},
		
		pieOption :  { 
		    title : {
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient : 'vertical',
		        x : 'right',
		        y : 'center',
		        data:[]
		    },
		    calculable : false,
		    series : [
		        {
		            name:'',
		            type:'pie',
		            radius : '90%',
		            center: ['50%', '50%'],
		            data:[],
		            itemStyle:{ 
		                normal:{ 
		                      label:{ 
		                        show: true, 
		                        position : 'inner',
		                        formatter : function (params) {                         
		                            return (params.percent - 0).toFixed(0) + '%'
		                          }
		                      }, 
		                      labelLine :{show:false} 
		                    } 
		            } 
		        }
		    ],
		    noDataLoadingOption:{
		        text :"<@label key='noData.C'>暂无数据</@label>",
		        effect : 'whirling',
		    }
		},
		
}

require.config({
     paths : {
            echarts : '${rc.getContextPath()}/manage/js/echarts'
        }
   });
require(
 [
   'echarts',
   'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
   'echarts/chart/pie'
 ],
    
 function(ec) {
    //饼图
    var $navTab = navTab.getCurrentPanel();
    controlArchivesInspect.defectLevelPie = ec.init($('#defectLevelPie', $navTab)[0]);
    controlArchivesInspect.defectTypePie = ec.init($('#defectTypePie', $navTab)[0]);
    controlArchivesInspect.responsibilityTypePie = ec.init($('#responsibilityTypePie', $navTab)[0]);
    var controlNum = $("input[name='controlNum']", $("div#archives_controlInspect")).val();
    controlArchivesInspect.showInspectPieByType("defectLevel",controlArchivesInspect.color1,controlArchivesInspect.defectLevelPie, {'controlNum':controlNum});
    
    controlArchivesInspect.showInspectPieByType("defectType",controlArchivesInspect.color2,controlArchivesInspect.defectTypePie, {'controlNum':controlNum});
    
    controlArchivesInspect.showInspectPieByType("responsibilityType",controlArchivesInspect.color3,controlArchivesInspect.responsibilityTypePie, {'controlNum':controlNum});
})
</script>